<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>给DOM元素添加事件</title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  /**
   * 1:在组建的DOM部分，任意的标签中 写上ref="xxx"
   * 2:通过组件对象 this.$refs.xxx  获取到元素
   * */
  var App={
    template:`
        <div>
          <input type="text" v-if="isShow" ref="input">
        </div>
      `,
    data:function(){
      return{
        isShow:false
      }
    },
    mounted:function(){
      //显示元素并获取焦点
      this.isShow = true;  //会触发input元素的插入
      //最终代码执行完毕以后，vue才会根据实际的值进行DOM操作

      //给input元素获取焦点
      //this.$refs.input.focus();  报错

      //我们希望在vue真正渲染DOM到页面以后，才做的事
      this.$nextTick(function(){
        this.$refs.input.focus();
      })

    }
  }

  new Vue({
    el:'#app',
    components:{
      app:App
    },
    template:'<app/>'
  })
</script>
</body>
</html>
